<template>
	<view class="follow-list">
		<scroll-view @scroll="scroll" class="scroll" scroll-y="true" >
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top">
					<view class="avatar">
						<image class="image" src="../static/image/portrait.png" @click="goUser" ></image>
					</view>
					<view class="author-name">
						{{item.author}}
					</view>
					<view class="iconfont icongengduo share">
					</view>
				</view>
				<view class="title">
					{{item.title}}
				</view>
				<view class="video-box">
					<follow-player :list="list" ref='player'  :index="index" :src="item.src" class="video-player"></follow-player>
					<view class="music-box">
						<view class="music">
							快乐学习啦啦啦,快乐学习啦啦啦
						</view>
					</view>
				</view>
				<view class="box">
					<view class="left">
						11-18
					</view>
					<view class="right">
						<view class="iconfont iconshare-copy icon">
							<text>分享</text>
						</view>
						<view class="iconfont iconpinglun-copy icon">
							<text>评论</text>
						</view>
						<view class="iconfont iconaixin1 icon">
							<text>赞</text>
						</view>
					</view>
				</view>
				<view class="comment">
					<view class="number">
						4.2w评论过
					</view>
					<view class="comment-box">
						<view class="iconfont iconbianji">
						</view>
						<input class="input" type="text" placeholder="添加评论..." value="" />
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import followPlayer from './followPlayer.vue'
	var timer = null
	export default {
		components: {
			followPlayer
		},
		props: ['list'],
		data() {
			return {
				index: 0,
				
			};
		},
		watch: {
			index() {
				if (this.index > 0 && this.index < this.list.length) {
					this.$refs.player[this.index - 1].pause()
				}
				if (this.index < this.list.length - 1 && this.index >= 0) {
					this.$refs.player[this.index + 1].pause()
				}
				if (this.index >= 0 && this.index < this.list.length) {
					this.$refs.player[this.index].play()
				}
			}
		},
		methods: {
			scroll(e) {
				clearTimeout(timer)
				setTimeout(()=>{
					const index = Math.floor((e.detail.scrollTop + 300) / 550) // 550是item的高度，150是增加一个缓冲距离
					this.index = index
				},300)
			},
			replayer(index){
				this.list.forEach((item,i)=>{
					if(i!==index){
						this.$refs.player[i].pause()
					}
				})
				this.$refs.player[index].replayer()
			},
			goUser(){
				uni.navigateTo({
					url:'/pages/user/user'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.follow-list {
		color: #ffffff;
		width: 100%;
		background-color: #000000;
		padding-bottom: 50px;
		padding-top: 10px;
		height: 100%;

		.scroll {
			height: 100%;
			width: 100%;
		}

		.item {
			padding: 0 15px 15px;
			height: 550px;
			.top {
				height: 35px;
				.avatar {
					height: 35px;
					width: 35px;
					border-radius: 50%;
					float: left;
					.image {
						height: 35px;
						width: 35px;
						border-radius: 50%;
					}
				}

				.author-name {
					float: left;
					font-size: 14px;
					height: 35px;
					line-height: 35px;
					margin-left: 5px;
				}

				.share {
					float: right;
					font-size: 15px;
					margin-right: 10px;
					height: 35px;
					line-height: 35px;
				}
			}

			.title {
				width: 100%;
				font-size: 13px;
				margin-top: 15px;
				height: 25px;
				line-height: 25px;
			}

			.video-box {
				width: 100%;
				height: 350px;
				position: relative;

				.video-player {
					// width: 85%;
					// height: 100%;
					z-index: 19;
				}

				.music-box {
					z-index: 20;
					position: absolute;
					bottom: 30px;
					left: 10px;
					width: 100px;
					overflow: hidden;

					.music {
						font-size: 14px;
						width: 200px;
						white-space: nowrap;
						animation: music 8s linear 0.2s infinite;
					}
				}
			}

			.box {
				display: flex;
				justify-content: space-between;
				margin-top: 25px;
				height: 25px;

				.left {
					font-size: 13px;
					line-height: 25px;
					height: 25px;
					color: #aaaaaa;
				}

				.right {
					display: flex;

					.icon {
						margin-right: 10px;
						font-size: 15px;

						text {
							padding-left: 3px;
							font-size: 13px;
						}
					}
				}
			}

			.comment {
				.number {
					width: 100%;
					height: 25px;
					font-size: 13px;
					line-height: 15px;
					color: #aaaaaa;
					margin: 10px 0;
				}

				.comment-box {
					height: 25px;
					display: flex;
					line-height: 25px;
					font-size: 14px;

					.input {
						margin-left: 10px;
					}
				}
			}

		}
	}

	@keyframes music {
		0% {
			transform: translate3d(80%, 0, 0);
		}

		,
		100% {
			transform: translate3d(-80%, 0, 0);
		}
	}
</style>
